<!DOCTYPE html>
<html lang="en">
    <!-- Head表示网页的头部 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 网页的标题 -->
    <title>HTML的基础标签</title>
</head>
<body>
<!-- 标题标签：他是一个块级元素，独占一行，自动换行-->
<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
<h6>标题标签6</h6>
<!-- 段落标签 ： 它是一个块级元素，独占一行，自动换行 公式 p*n 回车-->
<p>这是一个段落标签1</p>
<p>这是一个段落标签2</p>
<p>这是一个段落标签3</p>
<!-- 超链接：<a> 标签定义超链接，用于从一张页面连接到另一张页面。 -->
<!-- <a> 元素最重要的属性是href 属性，它指示连接的目标 -->
<!-- target表示在何处打开文档(可以理解为实在当前窗口中打开还是另开一个网页) -->
<!-- 注意：a标签是内联元素/行内元素：在同一行显示，如果一行显示不下自动换行 -->
<a href="index.html" target="_blank">超链接1</a>
<a href="http://www.baidu.com">超链接2</a>
<a href="http://www.163.com">超链接3</a>

<!-- HTML 图像是通过 <img> 标签进行定义的。 -->
<!-- src就是我们连接的图片的url地址 -->
<!-- 路径的问题 ../返回上一级-->
<img src="img/104.jpg ">

<!-- 图片链接 -->
<a href="index.html">
        <img src="img/104.jpg ">
</a>

<!-- table表格 行 tr   列 td    table>tr*n>td*n  回车-->
<table>
    <tr>\
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>1000</td>
        <td>Fender</td>
        <td>12</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>Gibson</td>
         <td>22</td>
        </tr>
</table>

<!-- 无序列表 ul -->
<ul>
    <li>Java</li>
    <li>NodeJS</li>
    <li>HTML</li>
    <li>JavaScript</li>
</ul>

<!-- 有序列表 ul -->
<ol>
        <li>Java</li>
        <li>NodeJS</li>
        <li>HTML</li>
        <li>JavaScript</li>
</ol>

<!-- 自定义列表 -->
<dl>
    <dt>Java</dt>
    <dd>针对Java描述详细信息</dd>
    <dt>Node</dt>
    <dd>针对Node描述的详细信息</dd>
</dl>

<!-- div 块级元素:一定要配合CSS才有效果 -->
<div>这是一个块级元素</div>
<div>这是一个块级元素</div>
<div>这是一个块级元素</div>

<!-- 内联元素:一定要配合CSS才有效果 -->
<span></span>
<span></span>
<span></span>

</body>
</html>